<template>
  <div id="detail">
    <nav-bar class="detail-nav">
      <div slot="left" @click="backToHome">返回</div>
      <div slot="middle" class="select-div">
        <div
          v-for="(item, index) in selectList"
          :key="'selectList' + index"
          class="select-item"
          :class="{ active: selectId === index }"
          @click="switchSelectId(index)"
        >
          {{ item }}
        </div>
      </div>
      <div slot="right"></div>
    </nav-bar>

    <scroll
      class="wrapper"
      ref="refScroll"
      @scroll="getScrollPosition"
      :probe-type="3"
    >
      <detail-swiper :banner_list="top_images" />
      <detail-goods-info :goods_info="goodsInfo" />
      <detail-shop-info :shop_info="shopInfo" />
      <detail-desc-info
        :detail_info="detailInfo"
        @img-load-finished="detailImgLoad"
      />
      <detail-params-info ref="paramsRef" :detail_params="detailParams" />
      <detail-comment-info ref="commentRef" :detail_comment="detailComment" />
      <goods-list ref="goodslistRef" :goods_list="currentGoodsList" />
    </scroll>
    <detail-bottom-bar @add-to-cart="addToCart" />
    <back-top v-show="showBackTop" @click.native="backToTop" />
  </div>
</template>

<script>
import { imgLoadMoutedMixins, backTopMixins } from 'assets/js/mixins'
import { debounce } from 'assets/js/utils.js'

import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'

import DetailSwiper from './comps/DetailSwiper'
import DetailGoodsInfo from './comps/DetailGoodsInfo'
import DetailShopInfo from './comps/DetailShopInfo'
import DetailDescInfo from './comps/DetailDescInfo'
import DetailParamsInfo from './comps/DetailParamsInfo'
import DetailCommentInfo from './comps/DetailCommentInfo'
import DetailBottomBar from './comps/DetailBottomBar'

import { getDetailDataReq } from 'network/detail'
import { getHomeDataReq, getHomeGoodsDataReq } from 'network/home'

export default {
  components: {
    NavBar,
    Scroll,
    GoodsList,

    DetailSwiper,
    DetailGoodsInfo,
    DetailShopInfo,
    DetailDescInfo,
    DetailParamsInfo,
    DetailCommentInfo,
    DetailBottomBar,
  },
  data() {
    return {
      id: 772,
      selectId: 0,
      selectList: ['商品', '参数', '评论', '推荐'],
      selectTopY: [],
      result: {
        detailInfo: [],
        itemParams: {},
        rateInfo: {},
      },
      item_info: {},
      item_services: {},
      price_info: {},
      shop_info: {},
      top_images: [],
      user_info: {},
      currentGoodsList: [],
    }
  },
  computed: {
    goodsInfo() {
      const obj = {
        title: this.item_info.title,
        desc: this.item_info.desc,
        price_old: this.price_info.oldPrice,
        price_now: this.price_info.nowPrice,
        price_tags: this.price_info.priceTags,
        goods_columns: this.item_services.columns,
      }
      // console.log(this.item_services.services);
      const temp_services = this.item_services.services
        ? this.item_services.services.splice(0, 3)
        : []
      obj.goods_services = temp_services

      return obj
    },
    shopInfo() {
      const obj = {
        logoUrl: this.shop_info.shopLogo,
        name: '某某黑心商家',
        score: this.shop_info.score,
        sellsCount: this.shop_info.cSells,
        goodsCount: this.shop_info.cGoods,
      }
      return obj
    },
    detailInfo() {
      return this.result.detailInfo.detailImage
    },
    detailParams() {
      return this.result.itemParams || {}
      // return {}
    },
    detailComment() {
      return this.result.rateInfo.list || []
      // return {}
    },
  },
  mixins: [imgLoadMoutedMixins, backTopMixins],
  created() {
    this.id = this.$route.params.id
    console.log('获得请求的商品id', this.id)
    this.getDetailData(this.id)
    // 模拟取一些商品数据作为详情页的商品推荐数据
    this.getHomeGoodsData('poplist')

    // 处理图片加载改变高度的防抖改变
    this.fangdoutest = debounce(() => {
      this.selectTopY = []
      this.selectTopY.push(0)
      this.selectTopY.push(this.$refs.paramsRef.$el.offsetTop)
      this.selectTopY.push(this.$refs.commentRef.$el.offsetTop)
      this.selectTopY.push(this.$refs.goodslistRef.$el.offsetTop)
    }, 300)
  },

  methods: {
    async getDetailData(id) {
      const res = await getDetailDataReq()
      console.log(res.item_info)
      this.result = res.result
      this.item_info = res.item_info
      this.item_services = res.item_services
      this.price_info = res.price_info
      this.shop_info = res.shop_info
      this.top_images = res.top_images
      this.user_info = res.user_info
    },
    // 获取 tab 切换页数据，type 是分类参数
    async getHomeGoodsData(type) {
      const { data } = await getHomeGoodsDataReq()
      // console.log(data)
      this.currentGoodsList = data[type].list
      // 当数据加载完后，将scroll的下拉状态更新一下
      this.$refs.refScroll.scrollFinishPullUp()
    },
    backToHome() {
      this.$router.back()
    },
    switchSelectId(id) {
      this.selectId = id
      this.$refs.refScroll.backToTop(0, -this.selectTopY[this.selectId], 1000)
    },
    detailImgLoad() {
      this.fangdoutest()
    },
    getScrollPosition(position) {
      const tempY = -position.y

      this.toggleBackTopFlag(position)

      // 信息分类按钮的切换
      if (tempY >= this.selectTopY[1] && tempY < this.selectTopY[2]) {
        this.selectId = 1
      } else if (tempY >= this.selectTopY[2] && tempY < this.selectTopY[3]) {
        this.selectId = 2
      } else if (tempY >= this.selectTopY[3]) {
        this.selectId = 3
      } else {
        this.selectId = 0
      }
    },
    async addToCart() {
      // 整理购物车需要的信息，发送
      const goods = {
        id: this.id,
        image: this.top_images[0],
        title: this.goodsInfo.title,
        desc: this.goodsInfo.desc,
        price: this.goodsInfo.price_now,
        count: 1,
        isChecked: true,
      }
      // 商品添加到购物车，添加到全局 vuex
      const res = await this.$store.dispatch('addCartList', goods)

      console.log(res)

      this.$toast.show(res.msg)
    },
  },
}
</script>

<style lang="less" scoped>
#detail {
  padding-bottom: 200px;
  position: relative;
  z-index: 9;
  background-color: #ffffff;

  .wrapper {
    height: calc(100vh - 93px);
    overflow: hidden;
    position: relative;
  }

  .detail-nav {
    background-color: #ffffff;
    color: #666666;
    box-shadow: 0px 1px 1px #eeeeee;
    .select-div {
      margin: 0 auto;
      width: 80%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .select-item {
        font-size: 12px;
        &.active {
          color: @base-color;
        }
      }
    }
  }
}
</style>
